<!DOCTYPE html>
<html>
<head>
<title>Data Flow Diagram</title>
<meta name="description" content="Directed acyclic graph of nodes with varying input and output ports with labels, oriented horizontally." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          initialContentAlignment: go.Spot.Left,
          initialAutoScale: go.Diagram.UniformToFill,
          layout: $(go.LayeredDigraphLayout,
                    { direction: 0 }),
          "undoManager.isEnabled": true
        }
      );

    // when the document is modified, add a "*" to the title and enable the "Save" button
    myDiagram.addDiagramListener("Modified", function(e) {
      var button = document.getElementById("SaveButton");
      if (button) button.disabled = !myDiagram.isModified;
      var idx = document.title.indexOf("*");
      if (myDiagram.isModified) {
        if (idx < 0) document.title += "*";
      } else {
        if (idx >= 0) document.title = document.title.substr(0, idx);
      }
    });

    function makePort(name, leftside) {
      var port = $(go.Shape, "Rectangle",
                   {
                     fill: "gray", stroke: null,
                     desiredSize: new go.Size(8, 8),
                     portId: name,  // declare this object to be a "port"
                     toMaxLinks: 1,  // don't allow more than one link into a port
                     cursor: "pointer"  // show a different cursor to indicate potential link point
                   });

      var lab = $(go.TextBlock, name,  // the name of the port
                  { font: "7pt sans-serif" });

      var panel = $(go.Panel, "Horizontal",
                    { margin: new go.Margin(2, 0) });

      // set up the port/panel based on which side of the node it will be on
      if (leftside) {
        port.toSpot = go.Spot.Left;
        port.toLinkable = true;
        lab.margin = new go.Margin(1, 0, 0, 1);
        panel.alignment = go.Spot.TopLeft;
        panel.add(port);
        panel.add(lab);
      } else {
        port.fromSpot = go.Spot.Right;
        port.fromLinkable = true;
        lab.margin = new go.Margin(1, 1, 0, 0);
        panel.alignment = go.Spot.TopRight;
        panel.add(lab);
        panel.add(port);
      }
      return panel;
    }

    function makeTemplate(typename, icon, background, inports, outports) {
      var node = $(go.Node, "Spot",
          $(go.Panel, "Auto",
            { width: 100, height: 120 },
            $(go.Shape, "Rectangle",
              {
                fill: background, stroke: null, strokeWidth: 0,
                spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight
              }),
            $(go.Panel, "Table",
              $(go.TextBlock, typename,
                {
                  row: 0,
                  margin: 3,
                  maxSize: new go.Size(80, NaN),
                  stroke: "white",
                  font: "bold 11pt sans-serif"
                }),
              $(go.Picture, icon,
                { row: 1, width: 55, height: 55 }),
              $(go.TextBlock,
                {
                  row: 2,
                  margin: 3,
                  editable: true,
                  maxSize: new go.Size(80, 40),
                  stroke: "white",
                  font: "bold 9pt sans-serif"
                },
                new go.Binding("text", "name").makeTwoWay())
            )
          ),
          $(go.Panel, "Vertical",
            {
              alignment: go.Spot.Left,
              alignmentFocus: new go.Spot(0, 0.5, -8, 0)
            },
            inports),
          $(go.Panel, "Vertical",
            {
              alignment: go.Spot.Right,
              alignmentFocus: new go.Spot(1, 0.5, 8, 0)
            },
            outports)
        );
      myDiagram.nodeTemplateMap.add(typename, node);
    }

    makeTemplate("Table", "images/55x55.png", "forestgreen",
                 [],
                 [makePort("OUT", false)]);

    makeTemplate("Join", "images/55x55.png", "mediumorchid",
                 [makePort("L", true), makePort("R", true)],
                 [makePort("UL", false), makePort("ML", false), makePort("M", false), makePort("MR", false), makePort("UR", false)]);

    makeTemplate("Project", "images/55x55.png", "darkcyan",
                 [makePort("", true)],
                 [makePort("OUT", false)]);

    makeTemplate("Filter", "images/55x55.png", "cornflowerblue",
                 [makePort("", true)],
                 [makePort("OUT", false),makePort("INV", false)]);

    makeTemplate("Group", "images/55x55.png", "mediumpurple",
                 [makePort("", true)],
                 [makePort("OUT", false)]);

    makeTemplate("Sort", "images/55x55.png", "sienna",
                 [makePort("", true)],
                 [makePort("OUT", false)]);

    makeTemplate("Export", "images/55x55.png", "darkred",
                 [makePort("", true)],
                 []);

    myDiagram.linkTemplate =
      $(go.Link,
        {
          routing: go.Link.Orthogonal, corner: 5,
          relinkableFrom: true, relinkableTo: true
        },
        $(go.Shape, { stroke: "gray", strokeWidth: 2 }),
        $(go.Shape, { stroke: "gray", fill: "gray", toArrow: "Standard" })
      );

    load();
  }

  // Show the diagram's model in JSON format that the user may edit
  function save() {
    document.getElementById("mySavedModel").value = myDiagram.model.toJson();
    myDiagram.isModified = false;
  }
  function load() {
    myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
  }
</script>
</head>
<body onload="init()">
<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 600px"></div>
  <p>
    This sample demonstrates labeled ports on nodes. These ports are set up as panels, created within
    the <b>makePort</b> function. This function sets various properties of the <a>Shape</a> and
    <a>TextBlock</a> that make up the panel, and properties of the panel itself. Most notable are
    <a>GraphObject.portId</a> to declare the shape as a port, and <a>GraphObject.fromLinkable</a> and
    <a>GraphObject.toLinkable</a> to set the way the ports can be linked.
  </p>
  <p>
    The diagram also uses the <b>makeTemplate</b> function to create the node templates with shared features.
    This function takes a type, an image, a background color, and arrays of ports to create the node
    to be added to the <a>Diagram.nodeTemplateMap</a>.
  </p>
  <p>
    For the same data model rendered somewhat differently, see the <a href="dataFlowVertical.html">Data Flow (vertical)</a> sample.
  </p>
  <div>
    <div>
      <button id="SaveButton" onclick="save()">Save</button>
      <button onclick="load()">Load</button>
      Diagram Model saved in JSON format:
    </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">
{ "class": "go.GraphLinksModel",
  "nodeCategoryProperty": "type",
  "linkFromPortIdProperty": "frompid",
  "linkToPortIdProperty": "topid",
  "nodeDataArray": [
{"key":1, "type":"Table", "name":"Product"},
{"key":2, "type":"Table", "name":"Sales"},
{"key":3, "type":"Table", "name":"Period"},
{"key":4, "type":"Table", "name":"Store"},
{"key":11, "type":"Join", "name":"Product, Class"},
{"key":12, "type":"Join", "name":"Period"},
{"key":13, "type":"Join", "name":"Store"},
{"key":21, "type":"Project", "name":"Product, Class"},
{"key":31, "type":"Filter", "name":"Boston, Jan2014"},
{"key":32, "type":"Filter", "name":"Boston, 2014"},
{"key":41, "type":"Group", "name":"Sales"},
{"key":42, "type":"Group", "name":"Total Sales"},
{"key":51, "type":"Join", "name":"Product Name"},
{"key":61, "type":"Sort", "name":"Product Name"},
{"key":71, "type":"Export", "name":"File"}
  ],
  "linkDataArray": [
{"from":1, "frompid":"OUT", "to":11, "topid":"L"},
{"from":2, "frompid":"OUT", "to":11, "topid":"R"},
{"from":3, "frompid":"OUT", "to":12, "topid":"R"},
{"from":4, "frompid":"OUT", "to":13, "topid":"R"},
{"from":11, "frompid":"M", "to":12, "topid":"L"},
{"from":12, "frompid":"M", "to":13, "topid":"L"},
{"from":13, "frompid":"M", "to":21},
{"from":21, "frompid":"OUT", "to":31},
{"from":21, "frompid":"OUT", "to":32},
{"from":31, "frompid":"OUT", "to":41},
{"from":32, "frompid":"OUT", "to":42},
{"from":41, "frompid":"OUT", "to":51, "topid":"L"},
{"from":42, "frompid":"OUT", "to":51, "topid":"R"},
{"from":51, "frompid":"OUT", "to":61},
{"from":61, "frompid":"OUT", "to":71}
  ]}
    </textarea>
  </div>
</div>
</body>
</html>
